<template>
  <div class="bg-white rounded-lg p-8">
    <div class="mb-8">
      <h2 class="text-2xl font-semibold text-gray-900 mb-2">账号安全</h2>
      <p class="text-sm text-gray-500">保护您的账号安全，设置安全验证方式</p>
    </div>

    <div class="mb-8">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">账号安全状态</h3>
      <div class="bg-blue-50 rounded-lg p-6">
        <div class="flex items-start justify-between mb-4">
          <div>
            <div class="flex items-baseline gap-2 mb-1">
              <span class="text-4xl font-bold text-gray-900">{{ securityScore }}</span>
              <span class="text-lg text-gray-600">{{ securityLevelText }}</span>
            </div>
            <div class="text-sm text-gray-500">安全分</div>
            <p class="text-sm text-gray-600 mt-2">根据手机号、邮箱绑定情况实时计算。</p>
          </div>
        </div>
        <div class="relative">
          <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
            <div class="h-full bg-blue-600 rounded-full" :style="{ width: securityScore + '%' }"></div>
          </div>
          <div class="flex justify-between text-xs text-gray-500 mt-2"><span>低</span><span>中</span><span>高</span><span>极高</span></div>
        </div>
      </div>
    </div>

    <div class="mb-8">
      <h3 class="text-lg font-semibold text-gray-900 mb-4">账号安全设置</h3>
      <div class="space-y-4">
        <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:border-gray-300">
          <div class="flex items-center gap-4">
            <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
              <!-- 手机号图标 -->
              <svg class="w-5 h-5 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <rect x="7" y="3" width="10" height="18" rx="2" ry="2" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M11 18h2" />
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">手机号绑定</div>
              <div class="text-sm text-gray-500">{{ phoneDisplay }}</div>
            </div>
          </div>
        </div>
        <div class="flex items-center justify-between p-4 border border-gray-200 rounded-lg hover:border-gray-300">
          <div class="flex items-center gap-4">
            <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
              <!-- 邮箱图标 -->
              <svg class="w-5 h-5 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8" />
                <rect x="3" y="5" width="18" height="14" rx="2" ry="2" />
              </svg>
            </div>
            <div>
              <div class="font-medium text-gray-900">邮箱绑定</div>
              <div class="text-sm text-gray-500">{{ emailDisplay }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <h3 class="text-lg font-semibold text-gray-900 mb-4">安全建议</h3>
      <div class="space-y-4">
        <div class="flex items-start gap-3 p-4 bg-blue-50 border border-blue-200 rounded-lg"><div class="font-medium text-gray-900 mb-1">定期修改密码</div><div class="text-sm text-gray-600">建议每3个月修改一次密码，使用字母、数字和符号组合</div></div>
        <div class="flex items-start gap-3 p-4 bg-green-50 border border-green-200 rounded-lg"><div class="font-medium text-gray-900 mb-1">开启双重验证</div><div class="text-sm text-gray-600">双重验证可大幅提高账号安全性</div></div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'CourierSecurity',
  data() {
    return {
      securityScore: 0,
      phone: '',
      email: ''
    }
  },
  computed: {
    phoneDisplay() {
      if (!this.phone) return '未绑定手机号'
      const p = String(this.phone)
      if (p.length >= 7) return `已绑定: ${p.slice(0, 3)}****${p.slice(-4)}`
      return `已绑定: ${p}`
    },
    emailDisplay() {
      if (!this.email) return '未绑定邮箱'
      return `已绑定: ${this.email}`
    },
    securityLevelText() {
      const s = this.securityScore
      if (s >= 90) return '极高'
      if (s >= 75) return '高'
      if (s >= 60) return '中'
      return '低'
    }
  },
  methods: {
    calcSecurityScore() {
      let score = 40
      if (this.phone) score += 35
      if (this.email) score += 25
      if (score > 100) score = 100
      this.securityScore = score
    },
    async loadProfile() {
      const userId = localStorage.getItem('userId')
      if (!userId) return
      try {
        const { data } = await axios.get(`/api/users/profile/${userId}`)
        const root = (data && data.data) || {}
        const u = root.user || {}
        this.phone = u.phone || ''
        this.email = u.email || ''
        this.calcSecurityScore()
      } catch (e) {
        console.error('加载账号信息失败', e)
      }
    }
  },
  mounted() {
    this.loadProfile()
  }
}
</script>
